<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东华理工大学</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page-hd {
            height: 140px;
            background-image: url(D:/HTMLCode/实验/课程设计/图片/head_bg.png);
            background-size: cover;
            background-position: left center;
            background-repeat: no-repeat;
        }

        .page-hd__left {
            margin-left: 100px;
            padding-top: 36px;
            padding-bottom: 36px;
            display: inline-block;
        }

        .page-hd__right {
            display: inline-block;
            height: 30px;
        }

        .page-hd__right a {
            display: inline-block;
            color: white;
            height: 28px;
            text-decoration: none;
            font-size: 15px;
            line-height: 28px;
            text-align: center;
            padding: 0px 5px;
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease-in-out;
        }

        .page-hd__right a:hover {
            background-color: rgb(211, 208, 208);
        }

        .page-bd {
            height: 50px;
            width: 1465px;
            background-color: rgb(8, 46, 120);
        }

        .page-bd li {
            display: inline-block;
            width: 128px;
            list-style: none;
        }

        .page-bd li a {
            display: inline-block;
            padding: 0 32px;
            line-height: 50px;
            color: #FFFFFF;
            font-size: 16px;
            text-decoration: none;

        }

        .page-bd a:hover {
            background-color: rgb(52, 177, 226);
        }
    </style>
</head>

<body>
    <div class="page-hd">
        <span class="page-hd__left">
            <img src="D:\HTMLCode\实验\课程设计\图片\logo.png" alt="" height="67px" width="265px">
        </span>
        <div class="page-hd__right">
            <ul style="list-style: none; float: right;">
                <li>
                    <a href="#" style="margin-left: 300px; width: 104px;">网上办事大厅</a>
                    <a href="#" style="width:48px;">邮箱</a>
                    <a href="#" style="width: 77px;">VPN登录</a>
                    <a href="#" style="width: 66px;">English</a>
                    <a href="#" style="width: 108px">校友会/基金会</a>
                    <input type="text" placeholder="请输入关键词...">
                    <img style="position: absolute; margin-top: 8px; margin-left: 5px;"
                        src="D:\HTMLCode\实验\课程设计\图片\sous.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div class="page-bd">
        <ul>
            <li style="margin-left: 150px; width: 96px;"><a href="#">首页</a></li>
            <li><a href="#">学校概况</a></li>
            <li><a href="#">机构设置</a></li>
            <li><a href="#" id="yan">院系设置</a>
                
            </li>
            <li><a href="#">教育教学</a></li>
            <li><a href="#">学术研究</a></li>
            <li><a href="#">招生就业</a></li>
            <li><a href="#">对外交流</a></li>
            <li><a href="#">校园生活</a></li>

        </ul>
    </div>
    <div class="page-ft">
        <img src="../课程设计/图片/6a9809b4-400b-4a9b-89ed-bb1e1cfc3d76.jpg" alt="" width="1465px" height="467px">
    </div>
</body>

</html>